<template>
  <div class="company-register-container">
    <el-card class="company-register-card" style="">
      <el-divider content-position="center">
        <span class="title">用人单位注册</span>
      </el-divider>
      <div style="margin-top: 40px;">
        <el-form ref="formRef" :model="form" label-width="140" :rules="rules">
          <el-form-item label="手机验证:" prop="phoneNumber">
            <el-input v-model="form.phoneNumber" placeholder="请输入手机号" style="width: 250px;">
            </el-input>
            <el-button type="primary" style="margin-left: 10px;" :icon="Message" @click="sendVerificationCode()"
                       :disabled="isSendingCode || countdown > 0">{{
                countdown > 0 ? `重新发送(${countdown})` : '发送验证码'
              }}
            </el-button>
          </el-form-item>
          <el-form-item label="短信验证码:" prop="smsCode">
            <el-input placeholder="请输入短信验证码" v-model="form.smsCode" style="width: 150px;"/>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input type="password" placeholder="请输入密码" show-password v-model="form.password"/>
          </el-form-item>
          <el-form-item label="确认密码:" prop="checkPassword">
            <el-input type="password" v-model="form.checkPassword" placeholder="请输入确认密码" show-password/>
          </el-form-item>
          <el-form-item label="统一社会信用代码:" prop="companyCode">
            <el-input v-model="form.companyCode"/>
          </el-form-item>
          <el-form-item prop="agree">
            <el-checkbox v-model="form.agree" :true-value="0" :false-value="1" name="agree">
              我已阅读且同意本网站的 <a href="/company/register/privacy" style="color: #409EFF;">《用户协议》</a>
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 48%;" @click="submitForm(formRef)" :loading="loading">注册
            </el-button>
            <el-button type="default" style="width: 48%;" @click="backToLogin">返回
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <verification-code-dialog v-model="showVerificationCodeDialog"
                                :phoneNumber="form.phoneNumber"
                                @done="closeVerificationCodeDialog"></verification-code-dialog>
    </el-card>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue'
import {Message} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus"
import {register} from "@/api/company/register"
import VerificationCodeDialog from './components/verification-code-dialog.vue'
import {useRouter} from 'vue-router'
import {setToken, getToken} from '@/utils/token-util.js'

const router = useRouter();


const formRef = ref(null);

const form = reactive({
  uuid: '',
  phoneNumber: '13645002540',//手机号  //TODO 生产环境删掉
  smsCode: '',//短信验证码
  password: '',//密码
  checkPassword: '',//验证密码
  companyCode: '111111111111111111', //用人单位统一社会信用代 //TODO 生产环境删掉
  agree: 0,
});
const validatorCheckPassword = (rule, value, callback) => {
  if (value !== form.password) {
    callback(new Error('两次密码输入不一致'));
  } else {
    callback();
  }
}

const validatorAgree = (rule, value, callback) => {
  if (value !== 0) {
    callback(new Error('如需使用本系统，必须勾选同意协议'));
  } else {
    callback();
  }
}
const rules = ref({
  phoneNumber: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 8, max: 20, message: '密码长度必须在 8 到 20 个字符', trigger: 'blur'}
  ],
  smsCode: [
    {required: true, message: '请输入6位短信验证码', trigger: 'blur'},
    {min: 6, max: 6, message: '请输入6位短信验证码', trigger: 'blur'}
  ],
  checkPassword: [
    {required: true, message: '请输入确认密码', trigger: 'blur'},
    {min: 8, max: 20, message: '密码长度必须在 8 到 20 个字符', trigger: 'blur'},
    {validator: validatorCheckPassword, trigger: 'blur'}
  ],
  companyCode: [
    {required: true, message: '请输入统一社会信用代码', trigger: 'blur'},
    {min: 18, max: 18, message: '统一社会信用代码长度必须为18个字符', trigger: 'blur'}
  ],
  agree: [
    {validator: validatorAgree, trigger: 'blur'}
  ]
});


const isSendingCode = ref(false);
const countdown = ref(0);
const sendVerificationCode = () => {
  //获取验证码
  if (form.phoneNumber != '') {
    const reg = /^1[3456789]\d{9}$/;
    if (!reg.test(form.phoneNumber)) {
      ElMessage.error('手机号码校验失败');
      return;
    }
  }
  openVerificationCodeDialog();
}


const showVerificationCodeDialog = ref(false);
const openVerificationCodeDialog = () => {
  showVerificationCodeDialog.value = true;
}

//关闭输入验证码窗口，发送短信
const closeVerificationCodeDialog = () => {
  showVerificationCodeDialog.value = false;
  //按钮倒计时
  isSendingCode.value = true;
  // 设置倒计时时间
  countdown.value = 10;
  // 倒计时效果
  const countdownInterval = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(countdownInterval);
      isSendingCode.value = false;
    }
  }, 1000);
}

/** 提交状态 */
const loading = ref(false);
const submitForm = () => {
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      return;
    }
    loading.value = true;

    //获取极验证
    initGeetest().then(res => {

    });

    // register(form).then(res => {
    //   loading.value = false;
    //   //ElMessage.success(res);
    //   //准备跳转后台
    //   ElMessage.success("注册成功");
    //   setToken(res);//存储token
    // }).catch(e => {
    //   loading.value = false;
    //   ElMessage.error(e.message);
    // });
  });
}

const backToLogin = () => {
  //跳转回登入页面
  router.push('/company/login');
}

onMounted(() => {
  //这边先判断下用人单位的状态
  if (getToken()) {
    //这个用人单位已经登入成功，准备跳转到用人单位后台
    router.push('/company/home');
  }
});


</script>
<style scoped>
.company-register-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */

  .company-register-card {
    width: 650px;
    padding-left: 40px;
    padding-right: 40px;

    .title {
      font-size: 16px !important;
      font-weight: bold;
    }
  }
}

:deep(.el-dialog) {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0px !important;
}
</style>

<style scoped>

</style>